/* 
自定义hook函数
利用组合API来自定义功能函数

作用类似于vue2中的mixin技术
*/

import {
  ref,
  onMounted,
  onBeforeUnmount
} from "vue"

export default function useClickPosition() {
  const x = ref(-1)
  const y = ref(-1)

  const clickHandler = (event: MouseEvent) => {
    console.log('click')
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => {
    document.addEventListener('click', clickHandler)
  })

  onBeforeUnmount(() => {
    document.removeEventListener('click', clickHandler)
  })
  return {
    x,
    y
  }
}